<template>
  <div class="basic clearfix">
    <el-form :model="roomData" ref="roomData" label-width="100px">
      <div class="page-left">
        <div class="hotel-name">
          <el-form-item label="酒店名称" :required="true">
            <el-input v-model="roomData.name" placeholder="请输入酒店名称"></el-input>
          </el-form-item>
        </div>
        <div class="hotel-aliases" >
          <div v-if="!roomData.hotelAlias.length" >
            <el-form-item label="酒店别名" >
              <el-input :disabled="true" placeholder="点击增加酒店别名">
              </el-input>
              <div class="add" @click="addItem()">
                <el-button type="text">添加</el-button>
              </div>
            </el-form-item>
          </div>
          <div :key="index" v-for="(item,index) in  roomData.hotelAlias">
            <el-form-item placeholder="请输入酒店别名" :label=" index === 0 ? '酒店别名':''">
              <el-input :disabled="true">
                <template slot="prepend">
                  <span>类别：{{item.channel}}</span>
                  <span>别名：{{item.name}}</span>
                  <span>英文名：{{item.enName}}</span>
                </template>
                <el-button slot="append" icon="el-icon-edit" @click="editItem(item,index)"></el-button>
                <el-button slot="append" icon="el-icon-delete" @click="deleteItem(item)"></el-button>
              </el-input>
              <div class="add" @click="addItem(index)" v-if = " index === roomData.hotelAlias.length-1">
                <el-button type="text">添加</el-button>
              </div>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="酒店星级" prop="region">
          <el-select v-model="roomData.star" placeholder="请选择酒店星级">
           <el-option v-for="item in HOTEL_STAR" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="酒店类型" prop="region">
          <el-select v-model="roomData.type" placeholder="请选择酒店类型">
            <el-option v-for="item in HOTEL_TYPE" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="客房数量" placeholder="请填写客房数量">
          <el-input v-model="roomData.roomNum"></el-input>
        </el-form-item>
        <div class="call">
          <div class="input-left">
            <el-form-item label="总机电话" required>
              <el-input v-model="roomData.tel"></el-input>
            </el-form-item>
          </div>
          <div class="input-right">
            <el-form-item label="传真">
              <el-input v-model="roomData.fax"></el-input>
            </el-form-item>
          </div>
        </div>
        <el-form-item label="酒店代码" placeholder="请填写酒店代码" :required="true">
          <el-input v-model="roomData.num"></el-input>
        </el-form-item>
        <el-form-item label="酒店地址" placeholder="请填写酒店地址" :required="true" >
          <el-cascader :options="cities" :props="{ value: 'cityid', label: 'city', children: 'citiess' }" filterable v-model="roomData.addressList" @change="setData">
          </el-cascader>
        </el-form-item>
        <el-form-item label="详细地址"  placeholder="请填写酒店详细地址" :required="true">
          <el-input v-model="roomData.address"></el-input>
        </el-form-item>
        <el-form-item label="酒店标签" placeholder="请填写酒店标签">
          <el-input v-model="roomData.tag"></el-input>
        </el-form-item>
        <el-form-item label="邮政编码" placeholder="请填写邮政编码">
          <el-input v-model="roomData.zipCode"></el-input>
        </el-form-item>
        <div class="latitude-longitude">
          <el-form-item label="经纬度" prop="name">
            <div class="input-left">
              <el-input v-model="roomData.lat" placeholder="请输入经度"></el-input>
              <label>经度</label>
            </div>
            <div class="input-right">
              <el-input v-model="roomData.lon" placeholder="请输入经度"></el-input>
              <label>纬度</label>
            </div>
          </el-form-item>
        </div>
      </div>
      <div class="page-right">
        <el-form-item label="英文名称" placeholder="请填写酒店英文名" :required="true">
          <el-input v-model="roomData.enName"></el-input>
        </el-form-item>
         <el-form-item label="PMS编码" placeholder="请填写PMS编码" :required="true">
          <el-input v-model="roomData.hotelCode"></el-input>
        </el-form-item>
        <el-form-item label="开业时间" placeholder="请选择开业时间">
          <el-date-picker v-model="roomData.openTime" type="date" placeholder="选择日期" default-value="2010-10-01">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="最后装修时间" placeholder="请选择最后一次装修时间">
          <el-date-picker v-model="roomData.lastRenovationTime" type="date" placeholder="选择日期" default-value="2010-10-01">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="酒店网址" placeholder="请填写酒店网址">
          <el-input v-model="roomData.web"></el-input>
        </el-form-item>
        <el-form-item label="公司简介" placeholder="请填写公司简介">
          <el-input type="textarea" v-model="roomData.description" rows="6"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="information-btn">
      <el-form-item>
        <el-button type="primary" @click="next" v-if="isCreate">下一步</el-button>
        <el-button type="primary" @click="back" v-if="isCreate">返回</el-button>
        <el-button type="primary" @click="next" v-if="!isCreate">保存</el-button>
        <el-button @click="back" v-if="!isCreate">关闭</el-button>
      </el-form-item>
    </div>
  </div>
</template>
<script>
// const ButtonFooter = () => import('@/components/common/ButtonFooter')
import { getPic } from '@/public/js/dic'
import {updateHotel, addHotel} from '@/public/js/hotelInfomation'
const cityData = require('@/data/editCities.json')
export default {
  props: ['roomInfo'],
  name: 'BasicInformation',
  data () {
    return {
      isCreate: true,
      dialogFormVisible: false,
      cities: cityData.provincesEntities,
      HotelValue: [],
      HotelAlias: [
        { name: 'string', enName: 'string', channel: 'string' }
      ],
      HOTEL_STAR: [],
      HOTEL_TYPE: []
    }
  },
  computed: {
    roomData () {
     
      return this.roomInfo
    },
    cityDefault () {

    }
  },
  created () {
    this.isCreate = JSON.parse(sessionStorage.getItem('isCreate'))
    sessionStorage.removeItem('last')
    // 通过字典查询 星级 、酒店类型
    getPic('HOTEL_STAR').then(res => {
      this.HOTEL_STAR = res.data.dicList
      console.log(this.HOTEL_STAR)
    })
    getPic('HOTEL_TYPE').then(res => {
      this.HOTEL_TYPE = res.data.dicList
    })
  },
  methods: {
    cancel () {
      this.dialogFormVisible = false
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    setData (val) {
      this.roomInfo.province = val[0]
      this.roomInfo.city = val[1]
      this.roomInfo.area = val[2]
    },
    addItem () {
      let aliasesData = {
        title: '新增酒店别名',
        data: {
          'name': '',
          'enName': '',
          'channel': '',
          'channelId': ''
        }
      }
      this.$emit('open', aliasesData)
      window.bus.$on('change', val => {
        console.log(val)
        this.roomInfo.hotelAlias.push(val)
      })
    },
    deleteItem (index) {
      this.roomInfo.hotelAlias.splice(index, 1)
    },
    // 修改别名
    editItem (item, index) {
      let aliasesData = {
        title: '修改酒店别名',
        data: JSON.parse(JSON.stringify(item))
      }
      this.$emit('open', aliasesData)
      window.bus.$on('change', val => {
        console.log(val)
        this.roomInfo.hotelAlias.splice(index, 1, val)
      })
    },
    back () {
      this.$router.go(-1)
    },
    // 保存
    next () {
      let data = {
        hotelUpdateEntity: {
          'num': this.roomInfo.num,
          'name': this.roomInfo.name,
          'enName': this.roomInfo.enName,
          'star': this.roomInfo.star,
          'country': this.roomInfo.country,
          'province': this.roomInfo.province,
          'city': this.roomInfo.city,
          'area': this.roomInfo.area,
          'address': this.roomInfo.address,
          'web': this.roomInfo.web,
          'tel': this.roomInfo.tel,
          'tag': this.roomInfo.tag,
          'openTime': this.roomInfo.openTime,
          'lastRenovationTime': this.roomInfo.lastRenovationTime,
          'fax': this.roomInfo.fax,
          'zipCode': this.roomInfo.zipCode,
          'roomNum': parseInt(this.roomInfo.roomNum),
          'lon': this.roomInfo.lon,
          'lat': this.roomInfo.lat,
          'type': this.roomInfo.type,
          'description': this.roomInfo.description,
          'hotelAlias': this.roomInfo.hotelAlias,
          'hotelCode':this.roomInfo.hotelCode
        }
      }
      if (!this.isCreate) {
        data.hotelUpdateEntity.id = this.roomInfo.id
        let hotelAlias = []
        this.roomInfo.hotelAlias.forEach(e => {
          hotelAlias.push({
            'name': e.name,
            'enName': e.enName,
            'channel': e.channel,
            'channelId': e.channelId
          })
        })
        data.hotelUpdateEntity.hotelAlias = hotelAlias
        updateHotel(data).then(res => {
          if (!res.data.errCode) {
            this.$message.success('保存成功')
          }
        })
      } else {
        let newData = {
          hotelEntity: data.hotelUpdateEntity
        }
        addHotel(newData).then(res => {
          if (res.data.errCode === 0) {
            // 存储roomID
            // console.log('this.roomInfo', this.roomInfo)
            console.log('res*******************',res)
            sessionStorage.setItem('hotelId', res.data.hotel.id)
            this.$emit('input', 'second')
          }
        })
      }
    }
  }
}
</script>
<style lang="scss">
.clearfix {
  clear: both;
  overflow: hidden;
}
.basic {
  margin-bottom: 30px;
  padding-top: 30px;
  color: #415161;
  .page-left,
  .page-right {
    width: 45%;
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .page-left {
    float: left;
    .hotel-aliases,
    .hotel-name {
      position: relative;
      .btn,
      .add {
        position: absolute;
        bottom: 0;
      }
      .add {
        right: -30px;
        top: 1%;
      }
      .btn {
        right: -10%;
      }
    }
  }
  .page-right {
    float: right;
    margin-right: 60px;
  }
}
.el-cascader,
.el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.latitude-longitude {
  display: block;
  .input-left,
  .input-right {
    width: 50%;
    .el-input {
      width: 80%;
      float: left;
    }
    label {
      margin-left: 4%;
      font-size: 12px;
    }
  }
  .input-left {
    float: left;
  }
  .input-right {
    float: right;
    margin-right: -4%;
  }
}
.call {
  overflow: hidden;
  .input-left,
  .input-right {
    width: 50%;
  }
  .input-left {
    float: left;
  }
  .input-right {
    float: right;
  }
}
.hotel-aliases {
  .el-dialog__header {
    text-align: left;
    background-color: rgb(243, 245, 249);
  }
}
.dialog-footer {
  text-align: center;
}
.el-input.is-disabled .el-input__inner {
  border-radius: 3px 0 0 3px;
  border:0;
  padding-left: 15px
}
.el-input-group__prepend,.el-input-group__append{
  border:0
}
.el-input-group__prepend{
  width: 100%;
  padding: 0 0 0 15px;
  span{
   display: inline-block;
   margin-right:20px
  }
}

</style>
